h3 Tables
  small A showcase of different components inside tables

// START panel
.panel.panel-default
  .panel-heading
    | Demo Table #1
  // START table-responsive
  .table-responsive
    table#table-ext-1.table.table-bordered.table-hover
      thead
        tr
          th UID
          th Picture
          th Username
          th First Name
          th Last Name
          th Email
          th Profile
          th Last Login
          th(check-all)
            .checkbox.c-checkbox
              label
                input(type='checkbox')
                span.fa.fa-check
      tbody
        tr
          td 1
          td
            .media
              img.img-responsive.img-circle(src="app/img/user/01.jpg", alt="Image")
          td @twitter
          td Larry
          td the Bird
          td mail@example.com
          td.text-center
            .radial-bar.radial-bar-25.radial-bar-xs(data-label="25%")
          td 1 week
          td
            .checkbox.c-checkbox
              label
                input(type='checkbox')
                span.fa.fa-check
        tr
          td 2
          td
            .media
              img.img-responsive.img-circle(src="app/img/user/02.jpg", alt="Image")
          td @mdo
          td Mark
          td Otto
          td mail@example.com
          td.text-center
            .radial-bar.radial-bar-50.radial-bar-xs(data-label="50%")
          td 25 minutes
          td
            .checkbox.c-checkbox
              label
                input(type='checkbox')
                span.fa.fa-check
        tr
          td 3
          td
            .media
              img.img-responsive.img-circle(src="app/img/user/03.jpg", alt="Image")
          td @fat
          td Jacob
          td Thornton
          td mail@example.com
          td.text-center
            .radial-bar.radial-bar-80.radial-bar-xs(data-label="80%")
          td 10 hours
          td
            .checkbox.c-checkbox
              label
                input(type='checkbox')
                span.fa.fa-check
  // END table-responsive
  .panel-footer
    .row
      .col-lg-2
        .input-group
          input.input-sm.form-control(type='text', placeholder='Search')
          span.input-group-btn
            button.btn.btn-sm.btn-default(type='button') Search
      .col-lg-8
      .col-lg-2
        .input-group.pull-right
          select.input-sm.form-control
            option(value='0') Bulk action
            option(value='1') Delete
            option(value='2') Clone
            option(value='3') Export
          span.input-group-btn
            button.btn.btn-sm.btn-default Apply
// END panel

// START panel
.panel.panel-default
  .panel-heading
    | Demo Table #2
  // START table-responsive
  .table-responsive
    table#table-ext-2.table.table-striped.table-bordered.table-hover
      thead
        tr
          th(check-all)
            .checkbox.c-checkbox
              label
                input(type='checkbox')
                span.fa.fa-check
          th Description
          th Active
      tbody
        tr
          td
            .checkbox.c-checkbox
              label
                input(type='checkbox')
                span.fa.fa-check
          td
            .media
                a.pull-left(href='#')
                  img.media-object.img-responsive.img-circle(src="app/img/user/01.jpg",alt="")
                .media-body
                  .pull-right.badge.baed-info admin
                  h4.media-heading Holly Wallace
                  p Username: holly123
                  | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          td.text-center
            label.switch
              input(type='checkbox')
              span
        tr
          td
            .checkbox.c-checkbox
              label
                input(type='checkbox')
                span.fa.fa-check
          td
            .media
                a.pull-left(href='#')
                  img.media-object.img-responsive.img-circle(src="app/img/user/03.jpg",alt="")
                .media-body
                  .pull-right.badge.baed-info writer
                  h4.media-heading Alexis Foster
                  p Username: ali89
                  | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          td.text-center
            label.switch
              input(type='checkbox', checked)
              span
        tr
          td
            .checkbox.c-checkbox
              label
                input(type='checkbox')
                span.fa.fa-check
          td
            .media
                a.pull-left(href='#')
                  img.media-object.img-responsive.img-circle(src="app/img/user/05.jpg",alt="")
                .media-body
                  .pull-right.badge.baed-info editor
                  h4.media-heading Mario Miles
                  p Username: mariomiles
                  | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          td.text-center
            label.switch
              input(type='checkbox', checked)
              span
  // END table-responsive
  .panel-footer
    .row
      .col-lg-2
        .input-group.pull-right
          select.input-sm.form-control
            option(value='0') Bulk action
            option(value='1') Delete
            option(value='2') Clone
            option(value='3') Export
          span.input-group-btn
            button.btn.btn-sm.btn-default Apply
      .col-lg-8
      .col-lg-2.text-right
        ul.pagination.pagination-sm
          li.active: a(href='#') 1
          li: a(href='#') 2
          li: a(href='#') 3
          li: a(href='#') »
// END panel

// START row
.row
  .col-lg-6
    // START panel
    .panel.panel-default
      .panel-heading
        | Demo Table #3
        // START table-responsive
        .table-responsive
          table#table-ext-3.table.table-striped.table-bordered.table-hover
            thead
              tr
                th Task name
                th Progress
                th Deadline
                th Action
            tbody
              tr
                td Nunc luctus, quam non condimentum ornare
                td 
                  .progress.progress-striped.progress-xs
                      .progress-bar.progress-bar-success.progress-80(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100')
                        span.sr-only 80% Complete
                td 05/05/2014
                td.text-center
                  span.dropdown(on-toggle='toggled(open)')
                    a(href='', uib-dropdown-toggle="")
                      i.fa.fa-cog
                    ul.dropdown-menu
                        li
                          a(href='#') Action
                        li
                          a(href='#') Another action
                        li
                          a(href='#') Something else here
                        li.divider
                        li
                          a(href='#') Separated link

              tr
                td Integer in convallis felis.
                td 
                  .progress.progress-striped.progress-xs
                      .progress-bar.progress-bar-danger.progress-20(role='progressbar', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100')
                        span.sr-only 20% Complete
                td 15/05/2014
                td.text-center
                  span.dropdown(on-toggle='toggled(open)')
                    a(href='', uib-dropdown-toggle="")
                      i.fa.fa-cog
                    ul.dropdown-menu
                        li
                          a(href='#') Action
                        li
                          a(href='#') Another action
                        li
                          a(href='#') Something else here
                        li.divider
                        li
                          a(href='#') Separated link

              tr
                td Nullam sit amet magna vestibulum libero dapibus iaculis. 
                td 
                  .progress.progress-striped.progress-xs
                      .progress-bar.progress-bar-info.progress-50(role='progressbar', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
                        span.sr-only 50% Complete
                td 05/10/2014
                td.text-center
                  span.dropdown(on-toggle='toggled(open)')
                    a(href='', uib-dropdown-toggle="")
                      i.fa.fa-cog
                    ul.dropdown-menu
                        li
                          a(href='#') Action
                        li
                          a(href='#') Another action
                        li
                          a(href='#') Something else here
                        li.divider
                        li
                          a(href='#') Separated link


        // END table-responsive
    // END panel
  .col-lg-6
    // START panel
    .panel.panel-default
      .panel-heading
        | Demo Table #4
      // START table-responsive
      .table-responsive
        table.table.table-striped.table-bordered.table-hover
          thead
            tr
              th Project
              th Activity
              th Completion
              th Take action
          tbody
            tr
              td Bootstrap 5.x
              td 
                sparkline(data-bar-color="{{colorByName('primary')}}", data-height="20", data-bar-width="5", data-bar-spacing="2", values="1,4,4,7,5,9,10", data-resize="true")
              td 
                .label.label-danger Canceled
              td.text-center
                .btn-group(uib-dropdown='dropdown')
                  button.btn.btn-default.btn-xs(type='button', ng-disabled='disabled', uib-dropdown-toggle="")
                    em.fa.fa-admin-down.fa-fw
                    |  Action
                  ul.dropdown-menu(role='menu')
                      li
                        a(href='#') Cancel
                      li
                        a(href='#') Delay
                      li
                        a(href='#') Re Plan 
                      li
                        a(href='#') Invoke meeting

            tr
              td Web Engine
              td 
                sparkline(data-bar-color="{{colorByName('purple')}}", data-height="20", data-bar-width="5", data-bar-spacing="2", values="1,4,4,10,5,9,2", data-resize="true")
              td
                .label.label-success Complete
              td.text-center
                .btn-group(uib-dropdown='dropdown')
                  button.btn.btn-default.btn-xs(type='button', ng-disabled='disabled', uib-dropdown-toggle="")
                    em.fa.fa-admin-down.fa-fw
                    |  Action
                  ul.dropdown-menu(role='menu')
                      li
                        a(href='#') Cancel
                      li
                        a(href='#') Delay
                      li
                        a(href='#') Re Plan 
                      li
                        a(href='#') Invoke meeting

            tr
              td Nullam sit amet
              td 
                sparkline(data-bar-color="{{colorByName('info')}}", data-height="20", data-bar-width="5", data-bar-spacing="2", values="1,4,4,7,5,9,4", data-resize="true")
              td
                .label.label-warning Delayed
              td.text-center
                .btn-group(uib-dropdown='dropdown')
                  button.btn.btn-default.btn-xs(type='button', ng-disabled='disabled', uib-dropdown-toggle="")
                    em.fa.fa-admin-down.fa-fw
                    |  Action
                  ul.dropdown-menu(role='menu')
                      li
                        a(href='#') Cancel
                      li
                        a(href='#') Delay
                      li
                        a(href='#') Re Plan 
                      li
                        a(href='#') Invoke meeting
      // END table-responsive
    // END panel
// END row